{% extends "base.html" %}

{% block content %}
<form method="post">
    {% csrf_token %}
    <div class="mb-3">
        <label for="title" class="form-label">问题标题</label>
        <input type="text" class="form-control" id="title" name="title">
    </div>
    <div class="mb-3">
        <label for="content" class="form-label">问题描述</label>
        <textarea class="form-control" id="content" name="content" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">提交问题</button>
</form>
    <!-- 模拟历史进度 -->
<div class="mt-5">
    <h4>历史进度</h4>
    <table class="table table-bordered">
        <thead class="table-light">
            <tr>
                <th>标题</th>
                <th>内容</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>开题报告已完成</td>
                <td>完成了课题背景与意义部分。</td>
                <td><span class="badge bg-warning text-dark">待审核</span></td>
                <td>
                    <button class="btn btn-sm btn-danger" onclick="deleteProgress(this)">删除</button>
                    <button class="btn btn-sm btn-info" onclick="editProgress(this)">修改</button>
                </td>
            </tr>
            <tr>
                <td>文献综述初稿</td>
                <td>收集并整理了10篇相关论文。</td>
                <td><span class="badge bg-success">已通过</span></td>
                <td>
                    <button class="btn btn-sm btn-danger" onclick="deleteProgress(this)">删除</button>
                    <button class="btn btn-sm btn-info" onclick="editProgress(this)">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- 修改进度表单（隐藏，默认不显示） -->
<div class="card mt-4" id="editFormCard" style="display: none;">
    <div class="card-header bg-info text-white">
        修改进度
    </div>
    <div class="card-body">
        <form>
            <div class="mb-3">
                <label for="editTitle" class="form-label">标题</label>
                <input type="text" class="form-control" id="editTitle" value="开题报告已完成">
            </div>
            <div class="mb-3">
                <label for="editContent" class="form-label">内容</label>
                <textarea class="form-control" id="editContent" rows="4">完成了课题背景与意义部分。</textarea>
            </div>
            <button type="button" class="btn btn-warning" onclick="saveProgress()">保存修改</button>
            <button type="button" class="btn btn-secondary" onclick="cancelEdit()">取消</button>
        </form>
    </div>
</div>

<!-- JS 脚本实现交互 -->
<script>
function deleteProgress(btn) {
    if (confirm('确定要删除这条进度吗？')) {
        btn.closest('tr').remove();
        alert('进度已删除');
    }
}

function editProgress(btn) {
    const row = btn.closest('tr');
    document.getElementById('editTitle').value = row.cells[0].innerText;
    document.getElementById('editContent').value = row.cells[1].innerText;

    // 显示修改表单
    document.getElementById('editFormCard').style.display = 'block';
}

function saveProgress() {
    alert('进度已保存');
    document.getElementById('editFormCard').style.display = 'none';
}

function cancelEdit() {
    document.getElementById('editFormCard').style.display = 'none';
}
</script>

{% endblock %}